<template>
  <!-- message组件 -->
  <div id="message" v-show="visible" :style="{ color: color }">
    {{ title }}
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs } from "vue";
export default defineComponent({
  name: "Message",
  setup() {
    // 控制组件的状态
    let visible = ref(false);
    let data = reactive({
      title: "",
      type: "",
      color: "",
    });

    // 显示组件
    let show = (config) => {
      if (!config["title"]) {
        throw Error("缺少title属性");
      }
      if (!config["type"]) {
        throw Error("缺少type属性");
      }

      if (config["type"] == "success") {
        data.color = "#52c41a";
      }
      if (config["type"] == "error") {
        data.color = "#ff4d4f";
      }
      if (config["type"] == "info") {
        data.color = "#faad14";
      }

      visible.value = true;
      data.title = config.title;
      data.type = config.type;

      setTimeout(
        () => {
          visible.value = false;
        },
        config.deplay ? config.deplay : 5000
      );
    };

    return {
      ...toRefs(data),
      visible,
      show,
    };
  },
});
</script>
<style scoped>
#message {
  width: 450px;
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 15px;
  background-color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0px 0px 14px -5px #222;
  cursor: default;
  color: #222;
  z-index: 1000;
}
</style>
